<template>
    <div class="main">
        <div class="content1">
            <div class="left">
                <el-select v-model="value" placeholder="请选择代理商" style="width: 300px">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="input" placeholder="请输入姓名或登录账号查询" style="margin-right: 10px"></el-input>
                <el-button type="primary">查询</el-button>
            </div>
            <div class="right">
                <v-add></v-add>
            </div>
        </div>
        <div class="content2">
            <div class="left">
                <div class="top"><span>集团区域</span><span>集团</span></div>
                <div class="tree">
                    <div class="tree1">
                        <qu-yu></qu-yu>
                    </div>
                    <div class="tree2">
                        <span v-for="(item,index) in form" @click="dailishan(index)" :class="{bg:show[index].show}">{{item.name}}</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="tab">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="姓名"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="登录账号"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="状态"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建人"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="创建时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="异动人"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="异动时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作">
                            <template slot-scope="scope">
                                <div class="caozuo">
                                    <div>
                                        <el-button size="mini" type="primary">详情</el-button>
                                    </div>
                                    <div>
                                        <el-button size="mini" type="primary">修改</el-button>
                                    </div>
                                    <div v-if="!(scope.row.static==='禁用')">
                                        <el-button size="mini" type="info">禁用</el-button>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="note">没有更多数据了</div>
            </div>
        </div>
    </div>
</template>

<script>
    import quYU from './quyu'
    import Add from './add_zhanghao'

    export default {
        name: "index",
        components: {
            'quYu': quYU,
            'vAdd': Add,
        },
        data() {
            return {
                add: {'boo': 'add', 'title': '创建代理商'},
                xiuGai: {'boo': 'xiuGai', 'title': '修改代理商'},
                check: {'boo': 'check', 'title': '查看代理商'},
                input: '',
                options:[],
                value:'',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                form: [{'name':'代理商一','key':1},{'name':'代理商二','key':1},{'name':'代理商三','key':1}],
                show:[{show:true},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}],
            }
        },
        methods: {
            dailishan(index) {
                this.show=[{show:false},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}]
                this.show[index].show=true
            }
        }
    }
</script>

<style lang="less" scoped>
    .bg{background: #fffece}
    .main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .content1 {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 10px;
            .left {
                display: flex;
                border-right: 1px solid #dedede;
                margin-right: 10px;
                padding-right: 10px;
            }
            .right {
                display: flex;
                flex-direction: row;
                div {
                    margin-right: 10px
                }
            }
        }
        .content2 {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .left {
                width: 400px;
                height: 100%;
                display: flex;
                border-right: 1px solid #dedede;
                flex-direction: column;
                .top {
                    width: 400px;
                    height: 36px;
                    background: #dedede;

                    line-height: 36px;
                    font-size: 14px;
                    span {
                        width: 200px;
                        height: 36px;
                        display: block;
                        float: left;
                        text-align: center;
                    }
                }
                .tree {
                    width: 400px;
                    display: flex;
                    flex-direction: row;
                    flex: 1;
                    background: #ffffff;
                    div {
                        flex: 1;
                    }
                    .tree2 {
                        border-left: 1px solid #dedede;
                        span {
                            width: 200px;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            display: block;
                            color: #606266;
                            cursor: pointer;
                            border-bottom: 1px solid #dedede;
                        }
                    }
                }
            }
            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                background: #fff;
                .caozuo {
                    display: flex;
                    justify-content: flex-start;
                    div {
                        margin-right: 4px;
                    }
                }
                .note {
                    font-size: 24px;
                    text-align: center;
                    margin-top: 40px;
                    color: #dedede;
                }
            }
        }
    }
</style>
